<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>圣杯</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#root {
			padding: 0 200px;
		}

		#left,
		#center,
		#right {
			float: left;
		}

		#left {
			width: 200px;
			height: 200px;
			background-color: pink;
			/* position: relative;
			left: -200px; */
			margin-left: -100%;
		}

		#center {
			width: 100%;
			height: 200px;
			background-color: red;
		}

		#right {
			width: 200px;
			height: 200px;
			background-color: yellow;
			margin-left: -200px;
		}

		#dsadas {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		#{
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -1/2width;
			margin-top: -1/2height;
		}
		#{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
</head>

<body>
	<div id="root">
		<div id="center">
			<p>dasdasdasdasdasdasdasdasdasdasdasdas</p><br>
			<p>dasdas</p><br>
			<p>dasdas</p><br>
		</div>
		<div id="left">

		</div>
		<div id="right">

		</div>
	</div>
</body>

</html>